<template>
  <div class="main-table">
    <el-table ref="multipleTable" :data="tableDataFormat"  tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column v-if="checked" type="selection" width="55" />
      <el-table-column v-if="idshow" prop="id" label="id" />
      <el-table-column v-if="getimg" :label="getimgmsg" prop="img" width="100">
        <template slot-scope="scope">
          <div class="changeIndex">
            <img :src="scope.row.img" alt="" @click="addbtn(scope.row, '预览')">
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="getimg1" :label="getimgmsg1" prop="img" width="100">
        <template slot-scope="scope">
          <div class="changeIndex">
            <img :src="scope.row.cert" alt="" @click="addbtn(scope.row, '预览1')">
          </div>
        </template>
      </el-table-column>
      <el-table-column v-for="item in title" v-if="item.label !== 'id'" :prop="item.prop" :label="item.label" :key="item.prop" show-overflow-tooltip />
      <el-table-column v-if="sort" label="排序" style="min-width: 60px;">
        <template slot-scope="scope">
          <div class="changeIndex">
            <span @click="changes('up', scope.row.id)">↑</span>
            <span @click="changes('down', scope.row.id)">↓</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="geturl" label="景区网址" style="min-width: 60px;">
        <template slot-scope="scope">
          <el-button size="mini" @click="addbtn(scope.row, '跳转')">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column v-if="btnshow" label="操作" style="min-width: 60px;">
        <template slot-scope="scope">
          <p v-for="btns in btntype" :key="btns" style="float: left;margin-right: 10px;">
            <el-button v-if="btns !== '分享'" size="mini" @click="addbtn(scope.row, btns)">{{ btns }}</el-button>
            <el-button
              v-clipboard:copy="message.indexOf('[[code]]') > -1 ? message.replace('[[code]]', scope.row.code) : message + scope.row.code"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              v-else
              size="mini"
              @click="addbtn(scope.row, btns)">{{ btns }}
            </el-button>
          </p>
          <el-button v-if="scope.row.status === '待审核'" size="mini" @click="addbtn(scope.row, '通过审核')">通过审核</el-button>
          <el-button v-if="scope.row.status === '已通过'" size="mini" @click="addbtn(scope.row, '取消通过')">取消通过</el-button>
          <el-button v-if="scope.row.status === '报名中'" size="mini" @click="addbtn(scope.row, '成团')">成团</el-button>
          <el-button v-if="scope.row.status === '报名中'" size="mini" @click="addbtn(scope.row, '散团')">散团</el-button>
          <el-button v-if="scope.row.status === '成功'" size="mini" @click="addbtn(scope.row, '完成团')">完成团</el-button>
          <el-button v-if="scope.row.comment_enabled === '开启'" size="mini" @click="addbtn(scope.row, '关闭')">关闭</el-button>
          <el-button v-if="scope.row.comment_enabled === '关闭'" size="mini" @click="addbtn(scope.row, '开启')">开启</el-button>
          <el-button v-if="scope.row.isshow === '显示'" size="mini" @click="addbtn(scope.row, '隐藏')">隐藏</el-button>
          <el-button v-if="scope.row.isshow === '隐藏'" size="mini" @click="addbtn(scope.row, '显示')">显示</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="pageshow" style=" padding-bottom: 50px;padding-top: 20px;">
      <el-pagination
        :page-count="parseInt(pagesall)"
        :current-page="parseInt(pages)"
        :page-size="30"
        style="float: right;"
        layout="prev, pager, next"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MsgList',
  props: {
    title: { // 列表标题
      type: Array,
      default: function() {
        return []
      }
    },
    tableData: { // 列表数据
      type: Array,
      default: function() {
        return []
      }
    },
    btntype: { // 操作按钮
      type: Array,
      default: function() {
        return []
      }
    },
    pagesall: { // 总页长
      type: Number,
      default: 1
    },
    pages: { // 当前页码
      type: Number,
      default: 1
    },
    message: { // 复制插件默认拼接内容
      type: String,
      default: ''
    },
    sort: { // 排序显示
      type: Boolean,
      default: false
    },
    checked: { // 多选显示
      type: Boolean,
      default: true
    },
    pageshow: { // 页码显示
      type: Boolean,
      default: true
    },
    btnshow: { // 预览显示
      type: Boolean,
      default: true
    },
    getimg: { // 预览显示
      type: Boolean,
      default: false
    },
    getimgmsg: {
      type: String,
      default: '封面'
    },
    getimg1: { // 预览显示
      type: Boolean,
      default: false
    },
    getimgmsg1: {
      type: String,
      default: '封面'
    },
    geturl: { // 链接
      type: Boolean,
      default: false
    },
    idshow: { // id显示
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      messageall: 'qweqe'
    }
  },
  computed: {
    tableDataFormat() {
      const data = JSON.parse(JSON.stringify(this.tableData))
      const status = {
        'enabled': '可用',
        'disabled': '不可用',
        'closed': '已关闭',
        'draft': '草稿',
        'all': '全部',
        'nopay': '未支付',
        'notice': '预告',
        'living': '直播中',
        'playback': '回放',
        'fail': '失败',
        'success': '成功',
        'pending': '报名中',
        'paid': '支付',
        'cancel': '取消',
        'completed': '完成',
        'create': '成团',
        'order': '定金',
        'viewed': '已看过',
        'important': '重要',
        '0': '不显示',
        '1': '显示',
        'wait': '待参与',
        'passed': '已通过',
        'reject': '已拒绝',
        'finish': '已完成',
        'close': '已关闭',
        'deleted': '已删除',
        'timeout': '已超时',
        'show': '显示',
        'hidden': '隐藏',
        'verfiy': '审核后显示'
      }
      const actiontype = {
        'bug': 'BUG',
        'advice': '建议',
        'diss': '吐槽',
        'ask': '询问',
        'course': '课程',
        'othert': '其他'
      }
      const contenttype = {
        'article': '文章',
        'question': '问答',
        'event': '活动',
        'live': '直播',
        'video': '视频'
      }
      const commentenabled = {
        '0': '关闭',
        '1': '开启'
      }
      const welstatus = {
        'nosend': '未下发',
        'send': '已下发',
        'used': '已使用'
      }
      const position = {
        'article': '文章',
        'question': '问答',
        'event_jumbotron': '活动巨幕',
        'event_commend': '活动右边',
        'video_jumbotron': '视频',
        'live_jumbotron': '直播'
      }
      const category = {
        'ad': '广告',
        'recommend': '编辑'
      }
      const usertype = {
        'ppc': 'ppc',
        'flcp': '放量测评',
        'hwll': '海外流量'
      }
      const isanswer = {
        '0': '否',
        '1': '是'
      }
      const isauthor = {
        '0': '否',
        '1': '是'
      }
      const enabled = {
        '1': '可用',
        '0': '不可用',
        '2': '全部'
      }
      const sex = {
        '0': '保密',
        '2': '女',
        '1': '男'
      }
      const videotype = {
        'free': '免费',
        'ppc': 'ppc会员',
        'flcp': '放量测评',
        'user': '指定用户',
        'hwll': '海外流量'
      }
      const livetype = {
        'free': '免费',
        'ppc': 'ppc会员',
        'flcp': '放量测评',
        'hwll': '海外流量',
        'user': '指定用户'
      }
      const reuseCode = {
        '1': '可以',
        '0': '不可以'
      }
      const needMobile = {
        '1': '必填',
        '0': '不用'
      }
      const isshow = {
        '1': '显示',
        '0': '不显示'
      }
      const isshow1 = {
        '1': '显示',
        '0': '隐藏'
      }
      const identity = {
        'company': '企业',
        'personal': '个人',
        'organization': '组织'
      }
      const patS = {
        'nopay': '未支付',
        'paid': '已支付',
        'refund': '已退款'
      }
      const msgbox = {
        'enabled': '可用',
        'disabled': '不可用'
      }
      for (const i in data) {
        if (data[i].status === 'wait' || data[i].status === 'passed' || data[i].status === 'reject' || data[i].status === 'enabled' || data[i].status === 'disabled' || data[i].status === 'draft' || data[i].status === 'all' || data[i].status === 'nopay' || parseInt(data[i].status) === 0 || parseInt(data[i].status) === 1 || data[i].status === 'notice' || data[i].status === 'living' || data[i].status === 'playback' || data[i].status === 'closed' || data[i].status === 'fail' || data[i].status === 'success' || data[i].status === 'pending' || data[i].status === 'important' || data[i].status === 'viewed' || data[i].status === 'finish' || data[i].status === 'close' || data[i].status === 'cancel' || data[i].status === 'deleted' || data[i].status === 'timeout' || data[i].status === 'show' || data[i].status === 'hidden' || data[i].status === 'verfiy' || data[i].status === 'paid') {
          data[i].status = status[this.tableData[i].status]
        }
        if (data[i].status === 'nosend' || data[i].status === 'send' || data[i].status === 'used') {
          data[i].status = welstatus[this.tableData[i].status]
        }
        if (data[i].action_type === 'bug' || data[i].action_type === 'advice' || data[i].action_type === 'diss' || data[i].action_type === 'ask' || data[i].action_type === 'othert' || data[i].action_type === 'course') {
          data[i].action_type = actiontype[this.tableData[i].action_type]
        }
        if (data[i].content_type === 'article' || data[i].content_type === 'question' || data[i].content_type === 'event' || data[i].content_type === 'video' || data[i].content_type === 'live') {
          data[i].content_type = contenttype[this.tableData[i].content_type]
        }
        if (data[i].position === 'article' || data[i].position === 'question' || data[i].position === 'event_jumbotron' || data[i].position === 'event_commend' || data[i].position === 'video_jumbotron' || data[i].position === 'live_jumbotron') {
          data[i].position = position[this.tableData[i].position]
        }
        if (data[i].category === 'ad' || data[i].category === 'recommend') {
          data[i].category = category[this.tableData[i].category]
        }
        if (parseInt(data[i].enabled) === 0 || parseInt(data[i].enabled) === 1 || parseInt(data[i].enabled) === 2) {
          data[i].enabled = enabled[this.tableData[i].enabled]
        }
        if (parseInt(data[i].sex) === 0 || parseInt(data[i].sex) === 1 || parseInt(data[i].sex) === 2) {
          data[i].sex = sex[this.tableData[i].sex]
        }
        if (data[i].video_type === 'free' || data[i].video_type === 'ppc' || data[i].video_type === 'user' || data[i].video_type === 'flcp' || data[i].video_type === 'hwll') {
          data[i].video_type = videotype[this.tableData[i].video_type]
        }
        if (data[i].live_type === 'free' || data[i].live_type === 'ppc' || data[i].live_type === 'user' || data[i].live_type === 'flcp' || data[i].live_type === 'hwll') {
          data[i].live_type = livetype[this.tableData[i].live_type]
        }
        if (parseInt(data[i].isauthor) === 0 || parseInt(data[i].isauthor) === 1) {
          data[i].isauthor = isauthor[this.tableData[i].isauthor]
        }
        if (parseInt(data[i].isanswer) === 0 || parseInt(data[i].isanswer) === 1) {
          data[i].isanswer = isanswer[this.tableData[i].isanswer]
        }
        if (parseInt(data[i].reuse_code) === 0 || parseInt(data[i].reuse_code) === 1) {
          data[i].reuse_code = reuseCode[this.tableData[i].reuse_code]
        }
        if (parseInt(data[i].need_mobile) === 0 || parseInt(data[i].need_mobile) === 1) {
          data[i].need_mobile = needMobile[this.tableData[i].need_mobile]
        }
        if (parseInt(data[i].is_show) === 0 || parseInt(data[i].is_show) === 1) {
          data[i].is_show = isshow[this.tableData[i].is_show]
        }
        if (parseInt(data[i].isshow) === 0 || parseInt(data[i].isshow) === 1) {
          data[i].isshow = isshow1[this.tableData[i].isshow]
        }
        if (parseInt(data[i].comment_enabled) === 0 || parseInt(data[i].comment_enabled) === 1) {
          data[i].comment_enabled = commentenabled[this.tableData[i].comment_enabled]
        }
        if (data[i].identity === 'company' || data[i].identity === 'personal' || data[i].identity === 'organization') {
          data[i].identity = identity[this.tableData[i].identity]
        }
        if (data[i].user_type === 'ppc' || data[i].user_type === 'flcp' || data[i].user_type === 'hwll') {
          data[i].user_type = usertype[this.tableData[i].user_type]
        }
        if (data[i].pay_status === 'nopay' || data[i].pay_status === 'paid' || data[i].pay_status === 'refund') {
          data[i].pay_status = patS[this.tableData[i].pay_status]
        }
        if (data[i].msgbox === 'enabled' || data[i].msgbox === 'disabled') {
          data[i].msgbox = msgbox[this.tableData[i].msgbox]
        }
      }
      return data
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit('getselect', val)
    },
    onCopy(e) {
      console.log(e)
    },
    onError() {
      this.$message.error('领取码复制失败，如果一直失败可能是浏览器不支持')
    },
    handleCurrentChange: function(date) {
      this.$emit('changepage', date)
    },
    addbtn(val, btn) {
      this.$emit('getid', { val: val, btn: btn })
    },
    changes(type, id) {
      console.log(type)
      const msg = {
        type: type,
        id: id
      }
      this.$emit('move', msg)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table--border::after, .el-table--group::after, .el-table::before {
  z-index: 0;
}

.el-checkbox__input.is-disabled .el-checkbox__inner {
  z-index: 0;
}

.changeIndex {
  img {
    width: 100%;
  }

  span {
    cursor: pointer;
    display: inline-block;
    width: 20px;
    text-align: center;
  }
}
</style>
